<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        body {
            margin: 0;
            color: white;
            background-color: black;
            text-align: center;
            font-size: 20px;
        }
        
        #time {
            font-size: 30px;
        }
        
        #box {
            box-shadow: 5px 10px 10px 10px plum;
            font-size: 300px;
            animation-duration: 1000ms;
        }
    </style>
</head>

<body>
    <br><br><br><br>
    <button onclick="start()">开始</button>
    <button onclick="stop()">暂停</button>
    <br><br>
    <span id="time"></span>
    <br><br>
    <span id="box"></span>
    <br> <br>
    <p id="result">正确0个，错误0个，正确率0%</p>
    <script>
        // ASCLL码
        var n = Math.random()*26+65;
        n = Math.floor(n);
        var ch = String.fromCharCode(n);

        var box = document.getElementById("box");
        var result = document.getElementById("result");
        var arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

        var count1 = 0,
            count2 = 0,
            res = true;

        function showWords() {
            var num = Math.random();
            num = Math.floor(num * 26);
            box.innerHTML = arr[num];

        }
        showWords();

        function keyInput() {
            document.body.onkeydown = function(e) {
                if (e.key.toUpperCase() == box.innerHTML) {
                    count1++;
                    box.classList.add("animated", "zoomIn");
                    setTimeout(function() {
                        box.classList.remove("zoomIn");
                    }, 1000);
                    showWords();
                    box.style.color = "white";
                    res = true;
                } else {
                    box.classList.add("animated", "fadeIn");
                    setTimeout(function() {
                        box.classList.remove("fadeIn");
                    }, 1000);
                    if (res) {
                        count2++;
                        box.style.color = "red";
                        res = false;
                    } else {
                        box.style.color = "red";
                        res = false;
                    }
                }

                result.innerHTML = "正确" + count1 + "个,错误" + count2 + "个，正确率" + Math.round((count1 / (count1 + count2)) * 100) + "%";
            }
        };
        var times = 11,
            timer;

        function run() {
            times--;
            time.innerHTML = "倒计时：" + times;
            if (times == 0) {
                alert("时间到，打字结束！");
                clearInterval(timer);
            }
        }

        function start() {

            keyInput();
            if (times == 0) {
                count1 = 0;
                count2 = 0;
                times = 11;
                timer = null;
                result.innerHTML = "正确" + count1 + "个,错误" + count2 + "个，正确率0%";
                showWords();
                box.style.color = "white";
            }


            if (timer) {
                return;
            }
            timer = setInterval(run, 1000);
        }

        function stop() {
            clearInterval(timer);
            timer = null;
        }
    </script>
</body>

</html>